<template>
    <el-select
        v-model="selectValue"
        filterable
        remote
        clearable
        :remote-method="getList"
        placeholder="请选择警务区"
        @change="handleChange"
    >
        <el-option
            v-for="item in list"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
    </el-select>

</template>

<script setup>

import {getPoliceAreaList} from '@/api/PoliceAreaManage/PoliceAreaManage.js';
import useUserStore from '@/store/modules/user.js';

const props = defineProps({
    modelValue: {
        type: [String, Number],
        default: null,
    },
    areatype: {
        type: String,
        default: '4'
    },
    isChooseOne: {
        type: Boolean,
        default: true
    }
});

const emit = defineEmits(['update:modelValue']);
const userStore = useUserStore();
const selectValue = ref([]);
const list = ref({});

// 双向绑定 - 监听 modelValue 变化
watch(() => props.modelValue, (newVal) => {
    selectValue.value = newVal;
});

// 获取警务区列表数据
const getList = async (keyword) => {
    const res = await getPoliceAreaList({
        areaname: keyword,
        areatype: props.areatype,
        unitId: userStore.info.unitId
    });
    list.value = res.rows.map(item => {
        return {
            label: item.areaname,
            value: item.policeareaId
        }
    });
    if (!props.modelValue && props.isChooseOne) {
        handleChange(res.rows?.[0]['policeareaId'])
    }
}

getList()

// 更改事件
const handleChange = (value) => {
    emit('update:modelValue', value);
}
</script>

<style scoped lang="scss">

</style>